<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>
          <i class="el-icon-goods"></i> 商品
        </el-breadcrumb-item>
        <el-breadcrumb-item>商品列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-button type="primary" icon="el-icon-circle-plus-outline" @click="handleAddto">新增分类</el-button>
        <el-button @click="handleExpandAll">展开所有</el-button>
      </div>
      <el-table :data="tableData" border row-key="id" lazy :expand-row-keys="expands" :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        class="table" ref="theTable" header-cell-class-name="table-header">
        <el-table-column type="index" label="序号" align="center"></el-table-column>
        <el-table-column prop="name" label="分类名称"></el-table-column>
        <el-table-column prop="sort" label="排序" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="handleIndex(scope.row)">子分类</el-button>
            <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex" :page-size="query.pageSize"
          :total="pageTotal" @current-change="handlePageChange"></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  // import {
  //   getCategory
  // } from '../../api/productTable.js';
  export default {
    data() {
      return {
        query: {
          name: '',
          commod: null,
          protype: null,
          pageIndex: 1,
          pageSize: 10
        },
        expandsAll: false,
        expands: [],
        tableData: [],
        pageTotal: 0,
        form: {},
        idx: -1,
        id: -1
      };
    },
    created() {
      // this.getData();
    },
    methods: {
      // 获取 easy-mock 的模拟数据
      getData() {
        getCategory().then(res => {
          this.tableData = res.data.list;
          this.pageTotal = res.data.total || 50;
        })
      },
      // 触发搜索按钮
      handleSearch() {

      },
      // 发布商品
      handleAddto() {
        this.$router.push({
          path: "/addCategory"
        })
      },
      // 推荐操作
      handleIndex(row) {
        this.$router.push({
          name: "addCategory",
          params: {
            id: row.id
          }
        });
      },
      // 上架操作
      handleDelete(row) {

      },
      // 编辑操作
      handleEdit(row) {

      },
      // 展开分类
      handleExpandAll() {
        this.tableData.map(item => {
          this.expands.push("" + item.id + "");
        })
      },
      // 分页导航
      handlePageChange(val) {
        this.$set(this.query, 'pageIndex', val);
        this.getData();
      }
    }
  };
</script>

<style scoped>
  .handle-box {
    margin-bottom: 20px;
  }

  .el-row {
    margin-bottom: 10px;
  }

  .el-row:last-child {
    margin-bottom: 0;
  }

  .handle-select {
    width: 120px;
  }

  .handle-input {
    width: 300px;
    display: inline-block;
  }

  .table {
    width: 100%;
    font-size: 14px;
  }

  .red {
    color: #ff0000;
  }

  .mr10 {
    margin-right: 10px;
  }

  .table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
  }
</style>
